<template>
	<view class="statistics-wrap">
			<view class="statistics-top">
		<!-- 切换导航附属栏 -->
		<sub-navigation>
			<scroll-view class="top-tabs-view" v-if="tabs.length>0" scroll-x="true">
				<block v-for="(tab,index) in tabs" :key="index">
					<view class="tabs-item-wrap" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
						<view class="tabs-item">
							<view class="tabs-item-txt" :class="[currentTab==index ? 'theme-color' : '']">{{tab.name}}</view>
							<view class="tabs-item-bottom" :class="[currentTab==index ? 'theme-color' : '']"></view>
						</view>
					</view>
				</block>
			</scroll-view> 
		</sub-navigation>
		<!-- 级别选择 -->
		<view v-if="orgLv!=='jxs'&&orgLv!=='dxy'" class="flex-row flex-m-between u-m-t-20 u-m-b-20 u-p-30 as-bgcolor-main">
			<text class="h2 ">级别选择</text>
			<view class="flex-row flex-c-center" @tap="lvlPopupShow=true">
				<text class="h3-g lvllabel" >{{lvlName}}</text>
				<i class="iconfont iconxiangyou"></i>
			</view>
		</view>
		<!-- chart -->
		<view class="as-charts flex-column flex-c-stretch">
			<view class=" flex-row flex-m-between head-title" >
				<text  class="h2 p">{{currentTab===1?'店员销售业绩':'销售金额统计'}}</text>
				<image class="img-40" src="~@/static/img/date.png" mode="aspectFit" @tap="datePopupShow=true"></image>
			</view>
			<!-- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas> -->
			<text v-if="num===0" class="chart-empty-tip ">暂无数据</text>
			<scroll-view  v-else class="scroll-view_H" scroll-x="true" >
					<canvas canvas-id="canvasColumn" id="canvasColumn" :style="{width:chartWidth+'px'}" class="charts"></canvas>
			</scroll-view>
			
		</view>
		</view>
		<!-- 表 -->
		<mescroll-uni :top="scrollTop" ref="mescrollRef" @up="loadList" @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback">
			<view class="as-list" v-if="currentTab===0" >
				<view class="tools-view">
					<text class="h2 p">销售金额一览</text>
				</view>
				<view class="flex-row flex-m-between">
					<text class=" cell h5-g flex20" >姓名/编码</text>
					<text class=" cell h5-g flex20" v-if="jsxVisible">APP出库JXS</text>
					<text class=" cell h5-g flex20" >APP出库DY</text>
					<text class=" cell h5-g flex20"  v-if="jsxVisible">JXS平均</text>
					<text class=" cell h5-g flex20" >DY平均</text>
				</view>
				<view v-for="(item,index) in amountList" :key="index"  class="flex-row flex-m-between flex-c-center neumorphism info-row">
					<!-- <text class=" flex20 h3  white-wrap" >{{item.dealerName+item.dealerId}}</text> -->
					<view class="flex20 flex-column flex-c-center white-wrap">
						<text class="flex1 h3  white-wrap" >{{item.dealerName||''}}</text>
						<text class="flex1 h3  white-wrap" >{{item.dealerId||''}}</text>
					</view>
					<text class=" flex20 h3"  v-if="jsxVisible">{{formatRMB(item.jxsAmount,'wan')}}</text>
					<text class=" flex20 h3" >{{formatRMB(item.dyAmount,'wan')}}</text>
					<text class=" flex20 h3"  v-if="jsxVisible">{{formatRMB(item.jxsAmountAverage,'wan')}}</text>
					<text class=" flex20 h3" >{{formatRMB(item.dyAmountAverage,'wan')}}</text>
				</view>
			</view>
		<!-- </mescroll-body>
		<mescroll-body v-if="currentTab===1"  ref="mescrollRef" @up="loadSalemanList" @init="mescrollInit"  @down="downCallback"> -->
			<view v-if="currentTab===1"  class="as-list" >
				<view class="tools-view">
					<text class="h2 p">店员业绩一览</text>
				</view>
				<view class="flex-row flex-m-between">
					<text class=" cell h5-g flex30" >店员</text>
					<text class=" cell h5-g flex20" >顾客数</text>
					<text class=" cell h5-g flex15" >产品数</text>
					<text class=" cell h5-g flex15" >订单数</text>
					<text class=" cell h5-g flex20" >金额</text>
				</view>
				<view v-for="(item,index) in salemanList" :key="index"  class="flex-row flex-m-between flex-c-center neumorphism info-row">
					<!-- <text class=" flex20 h3 ">{{item.salemanName+item.salemanId||''}}</text> -->
					<view class="flex30 flex-column flex-c-center white-wrap">
						<text class="flex1 h3  white-wrap" >{{item.salemanName||''}}</text>
						<text class="flex1 h3  white-wrap" >{{item.salemanId||''}}</text>
					</view>
					<text class=" flex20 h3" >{{item.memberNum}}</text>
					<text class=" flex15 h3" >{{item.goodNum}}</text>
					<text class=" flex15 h3" >{{item.orderNum}}</text>
					<text class=" flex20 h3" >{{formatRMB(item.amount)}}</text>
				</view>
			</view>
		</mescroll-uni>
		<date-popup @determine='determine' :value="dateValue" :beginDate="beginDate" :endDate="endDate" :popupShow='datePopupShow' @colosePopup='datePopupShow=false'></date-popup>
		<!-- <mx-date-picker :show="datePopupShow"  type="range" :value="dateValue" :show-tips="true"
			:show-seconds="true" @confirm="onSelected" @cancel="onSelected" /> -->
		<lvl-picker :popupShow="lvlPopupShow" :autoClose="false" @change="changeLvl"  @search="doSearchByLvl" @colosePopup="lvlPopupShow=false">
		</lvl-picker>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import uCharts from '@/packageC/static/u-charts/u-charts.js'
	// import uCharts from  '@/packageC/static/u-charts/config.js';
	import subNavigation from '../../components/sub-navigation/sub-navigation.vue';
	import lvlPicker from '../../components/lvl-picker/lvl-picker.vue';
	// import MxDatePicker from "@/packageC/components/mx-datepicker/mx-datepicker.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import chartMixin from "../../common/chart-mixin/chart-mixin.js";
	import datePopup from "../../components/char-date-picker/chart-date-picker.vue";
	
	var canvaColumn=null;
	export default {
		data() {
			return {
				num:10,
				jsxVisible:true,
				tabs: [{
					name: "销售金额统计"
				}, {
					name: "店员销售业绩"
				}],
				currentTab: 0, //当前tab
				amountList:[],
				salemanList:[],
				Column1:{categories:[],series:[]},
				Column2:{categories:[],series:[]},
				upOption: {
					auto: false,
				},
				downOption:{
					auto: false,
				},
				chartData:{
					"Column": {
						  "series": [{
							"name": "一班",
							"data": 50
						  }, {
							"name": "二班",
							"data": 30
						  }, {
							"name": "三班",
							"data": 20
						  }, {
							"name": "四班",
							"data": 18
						  }, {
							"name": "五班",
							"data": 8
						  }]
						}
					
				},
				scrollTop:'662',
				beginDate:null,
				endDate:null,			
				
				
			};

		},
		mixins:[chartMixin,MescrollMixin],
		components:{
			subNavigation,
			lvlPicker,
			// MxDatePicker,
			datePopup
		},
		onLoad() {
			let today = this.$util.getYearMonthDay(new Date())
			let lastWeek =this.$util.getYearMonthDay(new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000)) // new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
			this.beginDate = lastWeek
			this.endDate = today
			this.dateValue = [this.beginDate,this.endDate]
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			this.$nextTick(()=>{
				uni.getSystemInfo({
					success: (res) => {
						console.log("getSystemInfo res",res,res.windowWidth,res.windowHeight)
						this.chartWidth = res.windowWidth*0.9
						// this.chartHeight = res.windowHeight
						this.chartHeight = res.windowWidth*0.9*2/3
						// this.loadAmountChartData();
						
						// this.orgLv =  uni.getStorageSync('orgLv')
						// if(this.orgLv==='jxs'){
						// 	this.loadChartData()
						// 	this.mescroll.resetUpScroll()
						// }
						let today = this.$util.getYearMonthDay(new Date());
						let lastWeek = this.$util.getYearMonthDay(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)); // new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
						
						this.beginDate = lastWeek
						this.endDate = today
						this.loadChartData()
						this.mescroll.resetUpScroll()
						
						
						this.jsxVisible = !(this.orgLv==='dxy'||this.orgLv==='sxjxs')
						// if(this.orgLv==='dxy'||this.orgLv==='sxjxs'){
						// 	this.loadChartData()
						// 	this.mescroll.resetUpScroll()
						// }
					}
				})
			})
			
			if(this.orgLv!=='jxs'&&this.orgLv!=='dxy'){
						this.scrollTop='762'
					}
		
		},
		beforeDestroy() {
			this.mescroll.endErr()
		},
		methods: {
			onSelected(e, key) { //选择
				this.datePopupShow = false;
				if (e&&e.value&&e.value.length===2) {
					let [startTime,endTime] = e.value
					this.beginDate = startTime
					this.endDate = endTime

					if(this.currentTab===0){
						this.loadAmountChartData()
					}else{
						this.loadSalemanChartData()
					}
					this.mescroll.resetUpScroll()
				}
			},
			loadChartData(){
				if(this.currentTab===0){
					this.loadAmountChartData()
				}else{
					this.loadSalemanChartData()
				}
			},
			loadList(page){
				if(this.currentTab===0){
					this.loadAmountList(page)
				}else{
					this.loadSalemanList(page)
				}
			},
			loadAmountList(page) {
				// let orgLv=uni.getStorageSync('storeOrgLv')
				console.log("loadAmountList",page)
				const params = {
					current: page.num,
					pageSize: page.size,
					jxsId:this.lvlForm.jxsId, //	经销商编码
					jlId:this.lvlForm.jlId, //	经理编码
					bbzId:this.lvlForm.bbzId, //	本部长编码
					lsId:this.lvlForm.lsId, //	理事编码
					beginDate:this.beginDate, // 	开始时间
					endDate:this.endDate,	// 结束时间
					orgLv:this.orgLv
				};
				this.$http.getSaleAmountChartList(params).then((res) => {
					console.log("loadAmountList res",res)
					if(res.status === 0&&res.data) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.amountList= []
						};
						this.amountList = this.amountList.concat(curPageData);
					}else{
						this.mescroll.endSuccess(0);
						this.mescroll.endErr();
						// uni.showToast({
						// 	icon: 'none',
						// 	title:res.message,
						// 	duration:2000
						// })
					}
				})
							
			},
			loadAmountChartData(){
				// let orgLv=uni.getStorageSync('storeOrgLv')
				const params = {
					jxsId:this.lvlForm.jxsId, //	经销商编码
					jlId:this.lvlForm.jlId, //	经理编码
					bbzId:this.lvlForm.bbzId, //	本部长编码
					lsId:this.lvlForm.lsId, //	理事编码
					beginDate:this.beginDate, // 	开始时间
					endDate:this.endDate,	// 结束时间
					orgLv:this.orgLv
				};
				this.$http.getSaleAmountChart(params).then(res=>{
					console.log("getSaleChart===",res)
					if (res.status == 0&&res.data) {
						let Column={categories:[],series:[]};
						
						this.chartData = res.data
						Column.categories=this.chartData.dealerInfo||[]
						// if(this.chartData.jxsAmount&&this.chartData.jxsAmount.length>0){
						if(this.jsxVisible){
							Column.series.push({
								name: 'App出库JXS',
								data: this.chartData.jxsAmount||[],
								// color: '#000000'
							})
						}
						Column.series.push({
							name: 'App出库DY',
							data: this.chartData.dyAmount||[],
						})
						this.Column1 = Column
						this.showColumn("canvasColumn",Column)
					}
				})
			},
			loadSalemanList(page) {
				// let orgLv=uni.getStorageSync('storeOrgLv')
				const params = {
					current: page.num,
					pageSize: page.size,
					jxsId:this.lvlForm.jxsId, //	经销商编码
					jlId:this.lvlForm.jlId, //	经理编码
					bbzId:this.lvlForm.bbzId, //	本部长编码
					lsId:this.lvlForm.lsId, //	理事编码
					beginDate:this.beginDate, // 	开始时间
					endDate:this.endDate,	// 结束时间
					orgLv:this.orgLv
				};
				this.$http.getSalemanChartList(params).then((res) => {
					if(res.status === 0&&res.data) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.salemanList= []
						};
						this.salemanList = this.salemanList.concat(curPageData);
					}else{
						this.mescroll.endSuccess(0);
						this.mescroll.endErr();
						// uni.showToast({
						// 	icon: 'none',
						// 	title:res.message,
						// 	duration:2000
						// })
					}
				})
			},
			loadSalemanChartData(){
				// let orgLv=uni.getStorageSync('storeOrgLv')
				const params = {
					jxsId:this.lvlForm.jxsId, //	经销商编码
					jlId:this.lvlForm.jlId, //	经理编码
					bbzId:this.lvlForm.bbzId, //	本部长编码
					lsId:this.lvlForm.lsId, //	理事编码
					beginDate:this.beginDate, // 	开始时间
					endDate:this.endDate,	// 结束时间
					orgLv:this.orgLv
				};
				this.$http.getSalemanChart(params).then(res=>{
					console.log("getSalemanChart===",res)
					if (res.status == 0&&res.data) {
						let Column={categories:[],series:[]};
						this.chartData = res.data
						Column.categories=this.chartData.dealerInfo||[]
						Column.series[0]={
							name: '',
							data: this.chartData.amount||[],
							// color: '#000000'
						}
						this.Column2 = Column
						this.showColumn("canvasColumn",Column)
					}
				})
			},
			showColumn(canvasId,chartData){
				var num = chartData.categories.length;
				this.num = num
				// this.chartWidth =  num>=6?uni.upx2px(num * 125):uni.upx2px(6 * 125*0.9)
				this.chartWidth =  num>=3?uni.upx2px(num * 250):uni.upx2px(750*0.9)
				let chartPatams = {
					$this:this,
					canvasId: canvasId,
					type: 'column',
					legend:true,
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:this.pixelRatio,
					animation: true,
					dataPointShape:false,
					categories: chartData.categories,
					series: chartData.series,
					// format
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						min:0,
						showTitle: true,
						// format:(val)=>{return val.toFixed(0)+'元2'},
						 "data": [
								{
									"position": "left",
									"disabled": false,
									"axisLine": true,
									"axisLineColor": "#CCCCCC",
									"calibration": false,
									"fontColor": "#666666",
									"fontSize": 13,
									"textAlign": "right",
									"title": "人民币(元)",
									"titleFontSize": 13,
									"titleFontColor": "#666666",
									"min": 0,
									"max": null,
									"tofix": null,
									"unit": "",
									// "format":(val)=>{return this.currentTab===0?val.toFixed(2):val},
								},
								]
					},
					dataLabel: true,
					width: this.chartWidth,
					height: this.chartHeight,
					// extra: {
					// 	column: {
					// 	  width: 20,
					// 	  seriesGap:80
					// 	}
					//   },
					dataLabel: false,
				}
				if(this.currentTab===0){
					chartPatams['legend']={show:true}
					chartPatams['extra']={
						column: {
						  width: 20
						}
					  }
				}else{
					chartPatams['legend']={show:false}
					chartPatams['extra']={
						column: {
						  width: 20,
						  seriesGap:80
						}
					  }
				}
				canvaColumn=new uCharts(chartPatams);
			},
			swichMenu(current){ //点击其中一个 tab
				if (this.currentTab === current) {
					return false;
				} else {
					this.num=10
					this.currentTab = current;
					// this.showColumn("canvasColumn",this.currentTab===0?this.Column1:this.Column2)
					// if
					// this.showColumn("canvasColumn",{categories:[],series:[]})
					// if(current===0){
						 // canvaColumn =new uCharts({})
					// }else{
						 
					// }
					if(current===0){
						this.loadAmountChartData()
					}else{
						this.loadSalemanChartData()
					}
					// this.list = [] // 先置空列表,显示加载进度
					this.mescroll.resetUpScroll(); // 再刷新列表数据
			
				}
			},
			
		},

	}
</script>

<style lang="scss">
	 @import "../../common/statistics.scss";
	.charts{
		width: 100vw;
		height: 100%;
		background-color: #FFFFFF;
	}
	.top-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		box-shadow: 0 0 4rpx #FFFFFF;
		white-space: nowrap;
		height: 90rpx;
		position: fixed;
		left: 0;
		top: 0;
		/* css变量 */
		z-index: 888;
		border-top: 2rpx solid $borderColor;
		box-shadow: 0 0 4rpx $borderColor;
		border-top: 1rpx solid $borderColor;
	
		.tabs-item-wrap {
			display: inline-block;
			white-space: nowrap;
			height: 90rpx;
			width: 50%;
	
			.tabs-item {
				margin-left: 35rpx;
				margin-right: 30rpx;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
	
				.tabs-item-txt {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					font-weight: 400;
	
					// color: #333333;
					&.theme-color {
						color: $themeColor1;
					}
				}
	
				.tabs-item-bottom {
					position: absolute;
					bottom: 0rpx;
					width: 200rpx;
					height: 6rpx;
					left: calc(50% - 100rpx);
					&.theme-color {
						background-color: $themeColor1;
					}
				}
			}
		}
	
		&.tabs-view-other {
			.tabs-item-wrap {
				width: 25%;
			}
		}
	}
	
</style>
